/*
Copyright (c) REBUILD <https://getrebuild.com/> and/or its owners. All rights reserved.

rebuild is dual-licensed under commercial and open source licenses (GPLv3).
See LICENSE and COMMERCIAL in the project root for license information.
*/
/* eslint-disable no-unused-vars */

// ~~ 分派
class DlgAssign extends RbModalHandler {
  constructor(props) {
    super(props)
    this.onView = !!window.RbViewPage
    this._Props = ['assign', 'Assign', 'A']
  }

  render() {
    return (
      <RbModal title={$L(this._Props[1])} ref={(c) => (this._dlg = c)}>
        <div className="form">
          {this.onView === true ? null : (
            <div className="form-group row pb-0">
              <label className="col-sm-3 col-form-label text-sm-right">{$L('SomeWhichRecords,' + this._Props[1])}</label>
              <div className="col-sm-7">
                <div className="form-control-plaintext">{`${$L('DatasSelected')} (${$L('XItem').replace('%d', this.state.ids.length)})`}</div>
              </div>
            </div>
          )}
          <div className="form-group row">
            <label className="col-sm-3 col-form-label text-sm-right">{$L('SomeToWho,' + this._Props[1])}</label>
            <div className="col-sm-7">{this._useUserSelector()}</div>
          </div>
          {this.state.cascadesShow !== true ? (
            <div className="form-group row">
              <div className="col-sm-7 offset-sm-3">
                <a href="#" onClick={this._showCascade}>
                  {$L('SameSomeRelatedRecords,' + this._Props[1])}
                </a>
              </div>
            </div>
          ) : (
            <div className="form-group row">
              <label className="col-sm-3 col-form-label text-sm-right">{$L('SelectSome,RelatedRecord')}</label>
              <div className="col-sm-7">
                <select className="form-control form-control-sm" ref={(c) => (this._cascades = c)}>
                  {(this.state.cascadesEntity || []).map((item) => {
                    return (
                      <option key={item[0]} value={item[0]}>
                        {item[1]}
                      </option>
                    )
                  })}
                </select>
              </div>
            </div>
          )}
          <div className="form-group row footer">
            <div className="col-sm-7 offset-sm-3" ref={(c) => (this._btns = c)}>
              <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
                {$L('Confirm')}
              </button>
              <a className="btn btn-link btn-space" onClick={() => this.hide()}>
                {$L('Cancel')}
              </a>
            </div>
          </div>
        </div>
      </RbModal>
    )
  }

  _showCascade = () => {
    event && event.preventDefault()
    $.get(`/commons/metadata/references?entity=${this.props.entity}&permission=${this._Props[2]}`, (res) => {
      this.setState({ cascadesShow: true, cascadesEntity: res.data }, () => {
        const defaultSelected = []
        res.data.forEach((item) => defaultSelected.push(item[0]))

        $(this._cascades)
          .select2({
            multiple: true,
            placeholder: $L('SelectCasEntity'),
          })
          .val(defaultSelected)
          .trigger('change')
      })
    })
  }

  _useUserSelector() {
    return <UserSelector hideDepartment={true} hideRole={true} hideTeam={true} multiple={false} ref={(c) => (this._UserSelector = c)} />
  }

  post() {
    let users = this._UserSelector.val()
    if (!users || users.length === 0) {
      RbHighbar.create($L('PlsSelectSomeToWho,' + this._Props[1]))
      return
    }
    if ($.type(users) === 'array') users = users.join(',')
    const cass = this.state.cascadesShow === true ? $(this._cascades).val().join(',') : ''

    const $btns = $(this._btns).find('.btn').button('loading')
    $.post(`/app/entity/record-${this._Props[0]}?id=${this.state.ids.join(',')}&cascades=${cass}&to=${users}`, (res) => {
      if (res.error_code === 0) {
        this.setState({ cascadesShow: false })
        this._UserSelector.clearSelection()
        $(this._cascades).val(null).trigger('change')

        this.hide()
        RbHighbar.success($L('SomeSuccess,' + this._Props[1]))

        setTimeout(() => {
          if (window.RbListPage) RbListPage._RbList.reload()
          if (window.RbViewPage) location.reload()
        }, 500)
      } else {
        RbHighbar.error(res.error_msg)
      }
      $btns.button('reset')
    })
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    if (that.__HOLDER) that.__HOLDER.show(props)
    else
      renderRbcomp(<DlgAssign {...props} />, null, function () {
        that.__HOLDER = this
      })
  }
}

// ~~ 公海线索&客户分派
class DlgAssign2 extends RbModalHandler {
  constructor(props) {
    super(props)
    this.onView = !!window.RbViewPage
    this._Props = ['assign', 'Assign', 'A']
  }

  render() {
    return (
      <RbModal title={$L(this._Props[1])} ref={(c) => (this._dlg = c)}>
        <div className="form">
          {this.onView === true ? null : (
            <div className="form-group row pb-0">
              <label className="col-sm-3 col-form-label text-sm-right">{$L('SomeWhichRecords,' + this._Props[1])}</label>
              <div className="col-sm-7">
                <div className="form-control-plaintext">{`${$L('DatasSelected')} (${$L('XItem').replace('%d', this.state.ids.length)})`}</div>
              </div>
            </div>
          )}
          <div className="form-group row">
            <label className="col-sm-3 col-form-label text-sm-right">{$L('SomeToWho,' + this._Props[1])}</label>
            <div className="col-sm-7">{this._useUserSelector()}</div>
          </div>
          {this.state.cascadesShow !== true ? (
            <div className="form-group row">
              <div className="col-sm-7 offset-sm-3">
                <a href="#" onClick={this._showCascade}>
                  {$L('SameSomeRelatedRecords,' + this._Props[1])}
                </a>
              </div>
            </div>
          ) : (
            <div className="form-group row">
              <label className="col-sm-3 col-form-label text-sm-right">{$L('SelectSome,RelatedRecord')}</label>
              <div className="col-sm-7">
                <select className="form-control form-control-sm" ref={(c) => (this._cascades = c)}>
                  {(this.state.cascadesEntity || []).map((item) => {
                    return (
                      <option key={item[0]} value={item[0]}>
                        {item[1]}
                      </option>
                    )
                  })}
                </select>
              </div>
            </div>
          )}
          <div className="form-group row footer">
            <div className="col-sm-7 offset-sm-3" ref={(c) => (this._btns = c)}>
              <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
                {$L('Confirm')}
              </button>
              <a className="btn btn-link btn-space" onClick={() => this.hide()}>
                {$L('Cancel')}
              </a>
            </div>
          </div>
        </div>
      </RbModal>
    )
  }

  _showCascade = () => {
    event && event.preventDefault()
    $.get(`/commons/metadata/references?entity=${this.props.entity}&permission=${this._Props[2]}`, (res) => {
      this.setState({ cascadesShow: true, cascadesEntity: res.data }, () => {
        const defaultSelected = []
        res.data.forEach((item) => defaultSelected.push(item[0]))

        $(this._cascades)
          .select2({
            multiple: true,
            placeholder: $L('SelectCasEntity'),
          })
          .val(defaultSelected)
          .trigger('change')
      })
    })
  }

  _useUserSelector() {
    return <UserSelector hideDepartment={true} hideRole={true} hideTeam={true} multiple={false} ref={(c) => (this._UserSelector = c)} />
  }

  post() {
    let users = this._UserSelector.val()
    if(this.state.ids.length>1){
      RbHighbar.error('每次最多分派一条')
      return
    }
    if (!users || users.length === 0) {
      RbHighbar.create($L('PlsSelectSomeToWho,' + this._Props[1]))
      return
    }
    if ($.type(users) === 'array') users = users.join(',')
    const cass = this.state.cascadesShow === true ? $(this._cascades).val().join(',') : ''

    const $btns = $(this._btns).find('.btn').button('loading')
    $.ajax({
      type:'POST',
      url: `${this.props.api}`,
      data:JSON.stringify({
        id: this.state.ids.join(','),
        to: users
      }),
      contentType:'application/json;charset=UTF-8',
      dataType: 'JSON',
      success: (res) => {
        if (res.error_code === 0) {
          this.setState({ cascadesShow: false })
          this._UserSelector.clearSelection()
          $(this._cascades).val(null).trigger('change')

          this.hide()
          RbHighbar.success($L('SomeSuccess,' + this._Props[1]))

          setTimeout(() => {
            if (window.RbListPage) RbListPage._RbList.reload()
            if (window.RbViewPage) location.reload()
          }, 500)
        } else {
          RbHighbar.error(res.error_msg)
        }
        $btns.button('reset')
      }
    })
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    if (that.__HOLDER) that.__HOLDER.show(props)
    else
      renderRbcomp(<DlgAssign2 {...props} />, null, function () {
        that.__HOLDER = this
      })
  }
}

// ~~ 共享
class DlgShare extends DlgAssign {
  constructor(props) {
    super(props)
    this._Props = ['share', 'Share', 'S']
  }

  _useUserSelector() {
    return <UserSelector ref={(c) => (this._UserSelector = c)} />
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    console.log('create',props)
    if (that.__HOLDER2) that.__HOLDER2.show(props)
    else
      renderRbcomp(<DlgShare {...props} />, null, function () {
        that.__HOLDER2 = this
      })
  }
}

// ~~ 取消共享（批量模式）
class DlgUnshare extends RbModalHandler {
  constructor(props) {
    super(props)
    this.state.whichUsers = 'ALL'
  }

  render() {
    return (
      <RbModal title={$L('UnShare')} ref={(c) => (this._dlg = c)}>
        <div className="form">
          <div className="form-group row">
            <label className="col-sm-3 col-form-label text-sm-right">{$L('SomeWhichRecords,UnShare')}</label>
            <div className="col-sm-7">
              <div className="form-control-plaintext">{`${$L('DatasSelected')} (${$L('XItem').replace('%d', this.state.ids.length)})`}</div>
            </div>
          </div>
          <div className="form-group row pt-0 pb-0">
            <label className="col-sm-3 col-form-label text-sm-right">{$L('CancelWhichUsers')}</label>
            <div className="col-sm-7">
              <div className="mt-1">
                <label className="custom-control custom-control-sm custom-radio custom-control-inline mb-2">
                  <input className="custom-control-input" name="whichUsers" type="radio" checked={this.state.whichUsers === 'ALL'} onChange={() => this.whichMode(true)} />
                  <span className="custom-control-label">{$L('AllUser')}</span>
                </label>
                <label className="custom-control custom-control-sm custom-radio custom-control-inline mb-2">
                  <input className="custom-control-input" name="whichUsers" type="radio" checked={this.state.whichUsers === 'SPEC'} onChange={() => this.whichMode()} />
                  <span className="custom-control-label">{$L('SpecUser')}</span>
                </label>
              </div>
              <div className={'mb-2 ' + (this.state.whichUsers === 'ALL' ? 'hide' : '')}>
                <UserSelector ref={(c) => (this._UserSelector = c)} />
              </div>
            </div>
          </div>
          <div className="form-group row footer">
            <div className="col-sm-7 offset-sm-3" ref={(c) => (this._btns = c)}>
              <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
                {$L('Confirm')}
              </button>
              <a className="btn btn-link btn-space" onClick={() => this.hide()}>
                {$L('Cancel')}
              </a>
            </div>
          </div>
        </div>
      </RbModal>
    )
  }

  whichMode(isAll) {
    this.setState({ whichUsers: isAll === true ? 'ALL' : 'SPEC' })
  }

  post() {
    let users = this._UserSelector.val()
    if (this.state.whichUsers === 'ALL') {
      users = '$ALL$'
    } else {
      if (!users || users.length === 0) {
        RbHighbar.create($L('PlsSelectSome,CancelWhichUsers'))
        return
      }
      users = users.join(',')
    }

    const $btns = $(this._btns).find('.btn').button('loading')
    $.post(`/app/entity/record-unshare-batch?id=${this.state.ids.join(',')}&to=${users}`, (res) => {
      if (res.error_code === 0) {
        this._UserSelector.clearSelection()

        this.hide()
        RbHighbar.success($L(''))

        setTimeout(() => {
          if (window.RbListPage) RbListPage._RbList.reload()
        }, 500)
      } else {
        RbHighbar.error(res.error_msg)
      }
      $btns.button('reset')
    })
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    if (that.__HOLDER) that.__HOLDER.show(props)
    else
      renderRbcomp(<DlgUnshare {...props} />, null, function () {
        that.__HOLDER = this
      })
  }
}

// ~~ 管理共享
class DlgShareManager extends RbModalHandler {
  constructor(props) {
    super(props)
    this.state.selectedAccess = []
  }

  render() {
    return (
      <RbModal title={$L('ShareUsers')} ref={(c) => (this._dlg = c)}>
        <div className="sharing-list">
          <ul className="list-unstyled list-inline">
            {(this.state.sharingList || []).map((item) => {
              return (
                <li className={`list-inline-item ${this.state.selectedAccess.includes(item[1]) ? 'active' : ''}`} key={`access-${item[1]}`}>
                  <div onClick={() => this.clickUser(item[1])} title={$L('ByXSharedOnX').replace('%s', item[3]).replace('%s', item[2])}>
                    <UserShow id={item[0][0]} name={item[0][1]} showName={true} />
                    <i className="zmdi zmdi-check" />
                  </div>
                </li>
              )
            })}
          </ul>
        </div>
        <div className="dialog-footer" ref={(c) => (this._btns = c)}>
          {this.props.unshare === true && (
            <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
              {$L('UnShare')}
            </button>
          )}
          <button className="btn btn-secondary btn-space" type="button" onClick={() => this.hide()}>
            {$L('Cancel')}
          </button>
        </div>
      </RbModal>
    )
  }

  componentDidMount() {
    $.get(`/app/entity/shared-list?id=${this.props.id}`, (res) => {
      this.setState({ sharingList: res.data })
    })
  }

  clickUser(id) {
    if (this.props.unshare !== true) return
    const s = this.state.selectedAccess
    if (s.includes(id)) s.remove(id)
    else s.push(id)
    this.setState({ selectedAccess: s })
  }

  post() {
    const s = this.state.selectedAccess
    if (s.length === 0) {
      RbHighbar.create($L('PlsSelectSome,CancelWhichUsers'))
      return
    }

    const $btns = $(this._btns).button('loading')
    $.post(`/app/entity/record-unshare?id=${s.join(',')}&record=${this.props.id}`, (res) => {
      if (res.error_code === 0) {
        this.hide()
        RbHighbar.success($L('SomeSuccess,UnShare'))

        setTimeout(() => {
          if (window.RbViewPage) location.reload()
        }, 500)
      } else {
        RbHighbar.error(res.error_msg)
      }
      $btns.button('reset')
    })
  }

  // -- Usage
  /**
   * @param {*} id
   * @param {*} unshare
   */
  static create(id, unshare) {
    const props = { id: id, unshare: unshare !== false }
    const that = this
    if (that.__HOLDER) that.__HOLDER.show(props)
    else
      renderRbcomp(<DlgShareManager {...props} />, null, function () {
        that.__HOLDER = this
      })
  }
}

/*
* 转移分组
* */

class DlgTransferGroup extends RbModalHandler {
  constructor(props) {
    super(props)
    this._Props = ['transferGroup', '转移分组', 'T']
  }
  render() {
    return (
      <RbModal title={this._Props[1]} ref={(c) => (this._dlg = c)}>
        <div className="form">
          {this.onView === true ? null : (
            <div className="form-group row pb-0">
              <label className="col-sm-3 col-form-label text-sm-right">已选中</label>
              <div className="col-sm-7">
                <div className="form-control-plaintext">{`${$L('DatasSelected')} (${$L('XItem').replace('%d', this.state.ids.length)})`}</div>
              </div>
            </div>
          )}
          <div className="form-group row">
            <label className="col-sm-3 col-form-label text-sm-right">{this._Props[1]+'给谁'}</label>
            <div className="col-sm-7">{this._SelectorGroup()}</div>
          </div>

          <div className="form-group row footer">
            <div className="col-sm-7 offset-sm-3" ref={(c) => (this._btns = c)}>
              <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
                {$L('Confirm')}
              </button>
              <a className="btn btn-link btn-space" onClick={() => this.hide()}>
                {$L('Cancel')}
              </a>
            </div>
          </div>
        </div>
      </RbModal>
    )
  }
  post(){
    // const s = this.state.selectedAccess
    // if (s.length === 0) {
    //   RbHighbar.create($L('PlsSelectSome,CancelWhichUsers'))
    //   return
    // }
    var s = this.SelectorGroup.val()
    if(s.length===0){
      RbHighbar.create('请至少选择一项')
      return
    }
    const $btns = $(this._btns).button('loading')
    let _data = {}
    if(this.props.api.indexOf('/XnLead/')>-1 || this.props.api.indexOf('/account/')>-1){
      const key = this.props.api.indexOf('/XnLead/')>-1 ? ['leadIdList','leadTeamId'] : ['accountIdList','accountTeamId']
      _data = {
        [key[0]]: this.state.ids,
        [key[1]]:s.join()
      }
    } else if(this.props.api.indexOf('/leadTeam/')>-1 || this.props.api.indexOf('/accountTeam/')>-1){
      const key = this.props.api.indexOf('/leadTeam/')>-1 ? ['fromLeadTeamId','toLeadTeamId'] : ['fromAccountTeamId','toAccountTeamId']
      if(this.state.ids.length>1){
        RbHighbar.error('每次最多转移一条，请重新勾选')
        return
      }
      _data = {
        [key[0]]: this.state.ids.join(),
        [key[1]]:s.join()
      }
    }
    $.ajax({
      url:`${this.props.api}`,
      type:'POST',
      data:JSON.stringify(_data),
      contentType:'application/json;charset=UTF-8',
      dataType: 'JSON',
      success: (res) => {
        if (res.error_code === 0) {
          this.hide()
          RbHighbar.success(res.error_msg)
          setTimeout(() => {
            location.reload()
            // if (window.RbViewPage) location.reload()
          }, 500)
        } else {
          RbHighbar.error(res.error_msg)
        }
        $btns.button('reset')
      }
    })
    // $.post(`/XnLead/transferLeadForAdmin`,{
    //   asd:123,
    //   ss:1232
    // }, (res) => {
    //
    // })
  }
  _SelectorGroup() {
    return <SelectorGroup multiple={false} url={this.props.url} ref={(c) => (this.SelectorGroup = c)} />
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    if (that.__HOLDER2) that.__HOLDER2.show(props)
    else
      renderRbcomp(<DlgTransferGroup {...props} />, null, function () {
        that.__HOLDER2 = this
      })
  }
}

// 回收站还原
class DlgRecoveryReduction extends RbAlert {
  constructor(props) {
    super(props)
    this.state = { enableCascades: false }
  }

  render() {
    let message = this.props.message
    if (!message) message = this.props.ids ? $L('DeleteSelectedSomeConfirm').replace('%d', this.props.ids.length) : $L('DeleteRecordConfirm')

    return (
      <div className="modal rbalert" ref={(c) => (this._dlg = c)} tabIndex="-1">
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header pb-0">
              <button className="close" type="button" onClick={() => this.hide()}>
                <span className="zmdi zmdi-close" />
              </button>
            </div>
            <div className="modal-body">
              <div className="text-center ml-6 mr-6">
                <div className="text-warning">
                  <span className="modal-main-icon zmdi zmdi-alert-triangle" />
                </div>
                <div className="mt-3 text-bold">{message}</div>
                <div className="mt-4 mb-3" ref={(c) => (this._btns = c)}>
                  <button className="btn btn-space btn-secondary" type="button" onClick={() => this.hide()}>
                    {$L('Cancel')}
                  </button>
                  <button className="btn btn-space btn-warning" type="button" onClick={() => this.handleDelete()}>
                      还原
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  handleDelete() {
    let ids = this.props.ids || this.props.id
    if (!ids || ids.length === 0) return
    if (typeof ids === 'object') ids = ids.join(',')

    const $btns = $(this._btns).find('.btn').button('loading')
    $.post(`${this.props.api}?idList=${ids}`, (res) => {
      if (res.error_code === 0) {
        // if (res.data.deleted === res.data.requests) RbHighbar.success($L('SomeSuccess', 'Delete'))
        // else if (res.data.deleted === 0) RbHighbar.error($L('NotDeleteTips'))
        // else RbHighbar.success($L('SuccessDeletedXItems').replace('%d', res.data.deleted))
        RbHighbar.success('操作成功')
        this.hide()
        typeof this.props.deleteAfter === 'function' && this.props.deleteAfter()
      } else {
        RbHighbar.error(res.error_msg)
        $btns.button('reset')
      }
    })
  }
}


// 线索管理  批量导入
class DlgClueImport extends RbModalHandler {
  constructor(props) {
    super(props)
    this._Props = ['culeBatchImport', '批量导入', 'import']
  }
  render() {
    return (
      <RbModal title={this._Props[1]} ref={(c) => (this._dlg = c)}>
        <div className="form">
          {/* <div className="form-group row">
            <label className="col-sm-3 col-form-label text-sm-right">{this._Props[1]+'给谁'}</label>
            <div className="col-sm-7">{this._SelectorGroup()}</div>
          </div> */}
          <div className="form-group">
            <label className="text-bold pb-10">一、请按照数据模板的格式准备要导入的数据。</label>
            <div className="pl-lg-3 pb-lg-3">
              <button className="btn btn-link btn-space pb-10" type="button" onClick={() => this.downTemplate()}>
               下载数据模板
              </button>
              <p className="pl-lg-2">
                注意事项：<br/>
                1、模板中的表头名称不可更改，表头行不能删除<br/>
                2、项目顺序可以调整，不需要的项目可以删减<br/>
                3、其中系统定义必填项字段，必须保留<br/>
                4、单次最多支持20000条数据批量导入<br/>
              </p>
            </div>
            <label className="text-bold pb-10">二、请选择需要导入的.xlsx文件。</label>
            <div className="pl-lg-3">              
              <div className="file-select">
                <input type="file" id="cule-upload-input" accept=".xlsx,.xls,.csv" className="inner_input_sty" onChange={() => this.changeFile()} />
                <label className="new_upload_btn"><i className="zmdi zmdi-upload"></i><span>添加导入文件</span></label>
              </div>

              <div>
                <u className="text-bold J_upload_file_name"></u>
              </div>
            </div>
          </div>


          {/* <div className="form-group row footer" style={{textAlign: 'right'}}> */}
          <div ref={(c) => (this._btns = c)}  style={{textAlign: 'right'}}>
            <a className="btn btn-link btn-space" onClick={() => this.hide()}>
              {$L('Cancel')}
            </a>
            <button className="btn btn-primary btn-space" type="button" onClick={() => this.post()}>
              {$L('Confirm')}
            </button>
          </div>
          {/* </div> */}
        </div>

      </RbModal>
    )
  }

  downTemplate = () => {
    window.open(`${rb.baseUrl}${this.props.url}`)
  }
  changeFile() {
    console.log($('#cule-upload-input')[0].files[0])
    $('.J_upload_file_name').text($('#cule-upload-input')[0].files[0].name)
  }

  post(){
    // var formData = new FormData()
    // formData.append('file',$('#cule-upload-input')[0].files[0])
    // formData.append('name', 'hahhah.xlsx')
    // console.log(formData.get('file'))
    // $.ajax({
    //   type:'POST',                             
    //   url: this.props.uploadApi,               
    //   data: formData,                   
    //   // contentType:false,

    //   processData: false,
    //   headers:{
    //     // 'Content-Type': 'multipart/form-data'
    //   },
    //   success: function ( msg) {                 

    //   },
    //   //请求失败触发的方法
    //   error:function(XMLHttpRequest, textStatus, errorThrown){
    //     console.log('ajax请求失败')
    //     console.log('请求对象XMLHttpRequest: '+XMLHttpRequest)
    //     console.log('错误类型textStatus: '+textStatus)
    //     console.log('异常对象errorThrown: '+errorThrown)
    //   }
    // })

    var _that = this
    // 用原生写法   Ajax 接收不到参数
    var xhr = new XMLHttpRequest()
    xhr.open('post',  rb.baseUrl + this.props.uploadApi)
    var formData = new FormData()
    formData.append('file',$('#cule-upload-input')[0].files[0])
    xhr.send(formData) // 区别之处
    xhr.onreadystatechange = function() {
      console.log('xhr:', xhr)
      if (xhr.status === 200 && xhr.readyState === 4) {
        var res = JSON.parse(xhr.responseText)
        console.log('res', res)
        _that.hide()
        RbHighbar.success(res.data.msg)
      }
    }


  }
  _SelectorGroup() {
    return <SelectorGroup multiple={false} url={this.props.url} ref={(c) => (this.SelectorGroup = c)} />
  }

  // -- Usage
  /**
   * @param {*} props
   */
  static create(props) {
    const that = this
    if (that.__HOLDER2) that.__HOLDER2.show(props)
    else
      renderRbcomp(<DlgClueImport {...props} />, null, function () {
        that.__HOLDER2 = this
      })
  }
}